import React, { Component } from 'react';
import {
    View,
    Text,
    TextInput,
    StyleSheet,
    TouchableOpacity,
} from 'react-native';
import pxToDp from '../config/pxToDp'
export default class LoginInput extends Component{
    render(){
        const {cont} = this.props;
        const { placeholder } = this.props;
        return (
            <View>
                <View style={styles.twoInputSide}>
                    <View style={styles.lefttes}>
                        <Text style={styles.twoInputText}>
                            {this.props.cont}
						</Text>
                    </View>

                    <TextInput placeholder={this.props.placeholder}
                        style={styles.twoInputs}
                        clearButtonMode = 'while-editing'
                        secureTextEntry={this.props.secure}
                        underlineColorAndroid='transparent'
                        onChangeText={this.props.changeText}
                    />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({

    twoInputSide: {
        height:50,
        alignItems: 'center',
        flexDirection: 'row',
        // flex: 1,
        // paddingLeft: 15,
        // paddingRight: 15,
        borderBottomWidth: 1,
        borderBottomColor: 'rgb(220,220,220)',
    },
    lefttes:{
        height: 50,
        width:pxToDp(130),
        justifyContent:'center',
        borderRightWidth: 1,
        alignItems: 'center',
        borderRightColor: 'rgb(220,220,220)',
    },
    twoInputText: {
        fontSize: 14,
    },
    twoInputs: {
        width: pxToDp(555),
        paddingLeft:15,
        backgroundColor:'transparent',
    }
});